<html>
<head>
    <p style="font-size: 20px;color: red;">使用a标签方式将json导出csv文件</p>
    <button onclick='tableToExcel()'>导出</button>
    <img style="width: 600px;background-color: #0e0e42;padding: 50px;" src="./img/124.svg" alt="" srcset="">
    <input class="datas" type="date" name="" id="">
    <div class="select_view">

    </div>
</head>
<body>
    <script>
    
    const tableToExcel = () => {
        // 要导出的json数据
        const jsonData = [
            {
                name:'路人甲',
                phone:'123456789',
                email:'000@123456.com'
            },
            {
                name:'炮灰乙',
                phone:'123456789',
                email:'000@123456.com'
            },
            {
                name:'土匪丙',
                phone:'123456789',
                email:'000@123456.com'
            },
            {
                name:'流氓丁',
                phone:'123456789',
                email:'000@123456.com'
            },
        ];
        // 列标题，逗号隔开，每一个逗号就是隔开一个单元格
        let str = `姓名,电话,邮箱\n`;
        // 增加\t为了不让表格显示科学计数法或者其他格式
        for(let i = 0 ; i < jsonData.length ; i++ ){
            for(const key in jsonData[i]){
                str+=`${jsonData[i][key] + '\t'},`;     
            }
            str+='\n';
        }
        console.log(str)
        // encodeURIComponent解决中文乱码
        // const uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str);
        // // 通过创建a标签实现
        // const link = document.createElement("a");
        // link.href = uri;
        // // 对下载的文件命名
        // link.download =  "json数据表.csv";
        // link.click();
    }
    const root=document.querySelector('.select_view')
    const select_list=['1','2','5',100,200,300]
    root.style.cssText=`
        display: flex;
        flex-direction: column;
        position: relative;
		color:#fff
    `
	const inter=(ele)=>{
        ele.style.background='#bcecf1'
    }
    const out=(ele)=>{
        ele.style.background=''
    }
    const content=document.createElement("div")
    content.innerText=select_list[0]
    content.style.cssText=`
        padding:5px;
        box-shadow: inset 0px 0px 3px 1px rgba(123,132,245,0.5);
		border-radius: 2px;
		width:100%;
		height:100%;
		display: flex;
		padding-left:15px;
		align-items: center;
		box-sizing: border-box;
    `
    const list_view=document.createElement("div")
    list_view.style.cssText=`
        position: absolute;
		top: 100%;
		left: 0px;
		display: block;
		width: 100%;
		border: 1px solid rgb(212, 215, 253);
		box-shadow: 0px 0px 1px 1px #d4d7fd;
		box-sizing: border-box;
    `
    select_list.forEach(item=>{
        const select_item=document.createElement("div")
        select_item.style.cssText=`
            padding: 2.5px 5px;
            text-align:center;
        `
        select_item.innerText=item
        list_view.appendChild(select_item)
        select_item.onmouseenter=()=>{
            inter(select_item)
        }
        select_item.onmouseleave=()=>{
            out(select_item)
        }
        select_item.onclick=()=>{
            content.innerText=item
            list_view.style.display='none'
        }
    })
    content.onclick=()=>{
        list_view.style.display='block'
    }
    root.appendChild(content)
    root.appendChild(list_view)
    document.addEventListener('click',(e)=>{
        if(!root.contains(e.target)){
            list_view.style.display='none'
        }
    })
    </script>
</body>
<style>
    .datas::-webkit-datetime-edit {
        background-color: red;
    }
</style>
</html>
